
<template>
   <div>
        <van-nav-bar title="策略列表" right-text="搜索" @click-right="onSearchPopup"/>
        <van-sticky><div id="chartMain" style="width:100%; height:300px; background:white"></div></van-sticky>
        <div v-for="(item, index) in stocks" :key="index" style="margin:5px">
            <van-row justify="space-around" align="center" style="background:white;border-radius:10px">
                <van-col span="19">
                    <p style="margin-left:5px"> {{ item.ts_code + ' | ' + item.name }} </p>
                </van-col>
                <van-col span="5">
                    <van-badge :content="item.count"><van-button plain type="primary" @click="loadDaily(item)">日线</van-button></van-badge>
                </van-col>
            </van-row>
        </div>
        <van-dialog v-model:show="searchDialogShow" title="搜索">
            <van-search v-model="s" show-action placeholder="请输入搜索关键词">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </van-dialog>
        <van-tabbar route>
            <van-tabbar-item replace to="/strategy" icon="home-o">策略</van-tabbar-item>
            <van-tabbar-item replace to="/stock" icon="search">股票</van-tabbar-item>
            <van-tabbar-item replace to="/backtest" icon="friends-o">回测</van-tabbar-item>
            <van-tabbar-item replace to="/setting" icon="setting-o">管理</van-tabbar-item>
        </van-tabbar>
   </div>
</template>

<script>
import {
        getStocks,
        SearchStocks,
        getDaily,
    } from '@/api';

export default {
  data() {
    return {
      stocks: [],
      searchDialogShow: false,
      s:'',
      dailyPopupShow: false,
      dailyData: []
    };
  },

  methods: {
    onSearchPopup() {
      this.searchDialogShow = true
    },
    onSearch() {
        let _this = this
        let params = {s:_this.s}
        SearchStocks(params).then(res => {
            console.info(res.dataset)
            _this.stocks = res.dataset
            _this.searchDialogShow = false
        });
    },
    loadDaily(item) {
        let _this = this
        let params = {ts_code:item.ts_code}
        getDaily(params).then(res => {
            console.info(res.dataset)
            _this.dailyData = res.dataset
            _this.drawCharts()
        });
    },
    loadStocks(){
        let _this = this
        let params = {}
        getStocks(params).then(res => {
            console.info(res.dataset)
            _this.stocks = res.dataset
        });
    },
    drawCharts() {
        var echarts = require('echarts');
        var chartDom = document.getElementById('chartMain');
        var myChart = echarts.init(chartDom);
        let xdata = this.dailyData.map(item => item.trade_date)
        let ydata = this.dailyData.map(item => item.close)
        var _this = this
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: xdata
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: ydata,
                type: 'line'
                }
            ]
        })
    },
  },
   mounted:function(){
        this.loadStocks()
    }
};
</script>